<template>
    <div class="activity_box" :style="{width:tranString}">
      <div v-if="product.type !=2" style="display: flex;flex-direction: column;justify-content: space-between;">
        <div style="display: flex;flex-direction: row;align-items: flex-end;">
          <!--            <text>惠民价</text>-->
          <text class="column_product_price_newTitle" v-if="activity.length ==0 || (activity.length >0 && activity[0].type !='8')">¥{{price | price}}</text>
          <text class="column_product_marketPrice" v-if="activity.length ==0 && marketPrice!=price">¥{{marketPrice | price}}</text>
        </div>


        <div class="activity_four">
          <div class="activety_left">
            <text class="activity_left_title">批发价</text>
          </div>
          <div class="activity_right">
            <text class="activity_right_title">¥{{vipPrice | price}}</text>
          </div>
        </div>
<!--        <div>-->
<!--          <text class="column_product_marketPrice">¥{{marketPrice | price}}</text>-->
<!--        </div>-->
      </div>
      <div  v-if="point>0&&product.type ==2" style="display: flex;flex-direction: row;align-items: flex-end;">
        <text  style="padding-left: 10px;">兑换券:</text>
        <text class="column_product_price_newTitle" >{{point | number}}</text>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        data() {
            return {
                activity:[]
            }
        },
        props:['tranString','promotions','price','marketPrice','vipPrice','point','product'],
        created() { // 在实例创建完成后被立即调用
            this.tranString=this.tranString+'px'
            this.updatePromotion()
        },
        filters:{
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value){
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        methods: {
            updatePromotion() {
                var _this = this
                _this.activity = []

                if(!this.isNull(_this.vipPrice)){
                    if(Number(_this.vipPrice)<Number(_this.price)){
                        var vipPrice = {
                            price: _this.vipPrice,
                            type: '100',
                            title: 'VIP'
                        }
                        _this.activity.push(vipPrice)
                    }
                }

                _this.promotions.forEach(function(item){
                    if (item.type == '10' || item.type=='8') {
                        _this.activity.push(item)
                    }
                })

                _this.activity.sort((a, b) => { return a.price - b.price })

            }
        },
        components: {},
    }
</script>

<style scoped>
    .activity_box {
        display: flex;
          flex: 1;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .activity_four {
        border-radius: 60px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-right: 10px;
        overflow: hidden;
    }

    .activety_left {
        background-color: rgba(94, 74, 74, 1);
        padding:4px 12px;
    }

    .activity_right_title {
        font-size: 24px;
        font-weight: bold;
        color: rgba(94, 74, 74, 1);
        line-height: 34px;
        height: 32px;
        display: block;
    }

    .activity_left_title {
        font-size: 24px;
        color: rgba(247, 219, 194, 1);
        line-height: 34px;
        height: 32px;
        display: block;
    }

    .activity_right {
        padding: 4px 12px;
        background-color: rgba(247, 219, 194, 1);
    }

    .column_product_price_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        overflow: hidden;
        height: 50px;
    }



    .column_product_price_newTitle {
        /*font-size: 36px;*/
        font-size: 28px;
        font-weight: bold;
        color: rgba(231, 91, 83, 1);
        margin-right: 10px;
        /* height: 36px; */
        line-height: 36px;
    }

    .column_product_price {
        font-size: 22px;
        color: rgba(0, 0, 0, 0.5);
        text-decoration: line-through;
        line-height: 40px;
    }
    .column_product_marketPrice{
        font-size: 26px;
        color: rgba(0, 0, 0, 0.5);
        text-decoration: line-through;
    }

</style>
